<template>
<div class="city_map" ref="city_map">
  <div class="top" :class="isMobile?'top_m':''"></div>
  <div class="left_add" :class="isMobile?'left_add_m':''">
    <div class="item_add" v-for='(item,index) in address' :key="index">
      <div @click="changeL(item,index)" :class="isMobile?'yuan_m':''" class='yuan' :style="'background:'+(list.findIndex(item1=>item1[1].name==item.name)>-1?item.color:'')"></div>
      <div @click="changeL(item,index)" class="item_add_title" :class="list.findIndex(item1=>item1[1].name==item.name)>-1?'choose':''" :style="'background:'+item.color">{{item.name}}</div>
    </div>
    <div class="item_add margin">
      <div :class="isMobile?'yuan_m':''" class='yuan' style="background:red" @click="toDetail"></div>
      <div class="item_add_title choose"  style="background:red">投资指南</div>
    </div>
  </div>
  <vue-draggable-resizable 
    :w="widthDiv"
    :h="heightDiv"
    :x="xDiv"
    :y="yDiv"
    :resizable="false"
    class-name="dragging1"
    ref="ddd"
    id="ddd">
      <div class="main" :class="isMobile?'main_m':''" ref="mainMap" @mousewheel="gun">
        <div id="fxmap"></div>
      </div>
  </vue-draggable-resizable>
  <div class="footer" :class="isMobile?'footer_m':''"></div>
</div>
</template>
<script>



function setGesture(el){
    var obj={}; //定义一个对象
    var istouch=false;
    var start=[];
    el.addEventListener("touchstart",function(e){
        if(e.touches.length>=2){  //判断是否有两个点在屏幕上
            istouch=true;
            start=e.touches;  //得到第一组两个点
            obj.gesturestart&&obj.gesturestart.call(el); //执行gesturestart方法
        };
    },false);
    document.addEventListener("touchmove",function(e){
        e.preventDefault();
        if(e.touches.length>=2&&istouch){
            var now=e.touches;  //得到第二组两个点
            var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例，getDistance是勾股定理的一个方法
            e.scale=scale.toFixed(2);
            obj.gesturemove&&obj.gesturemove.call(el,e);  //执行gesturemove方法
        };
    },false);
    document.addEventListener("touchend",function(e){
        if(istouch){
            istouch=false;
            obj.gestureend&&obj.gestureend.call(el);  //执行gestureend方法
        };
    },false);
    return obj;
};
function getDistance(p1, p2) {
    var x = p2.pageX - p1.pageX,
        y = p2.pageY - p1.pageY;
    return Math.sqrt((x * x) + (y * y));
};
function getAngle(p1, p2) {
    var x = p1.pageX - p2.pageX,
        y = p1.pageY- p2.pageY;
    return Math.atan2(y, x) * 180 / Math.PI;
};









import VueDraggableResizable from 'vue-draggable-resizable'

import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import {  } from "@/api/api";
import xjMap from './xMap.json'
import { option } from "./mapData.js";
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i].name,
      add:data[i].add,
      color:data[i].color,
      value: [data[i].lon,data[i].lat],
    })
  }
  return res;
};
var convertData1 = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i][0].name,
      value: [data[i][0].lon,data[i][0].lat],
    })
    res.push({
      name: data[i][1].name,
      color:data[i][1].color,
      value: [data[i][1].lon,data[i][1].lat],
    })
  }
  return res;
};
// var convertData2 = function (data) {
// 	let res = []
// 	for (let i = 0; i <  data.length; i ++) {
// 		let item = data[i]
// 		//  获取 来去 地址的 经纬度
// 		let fromCoord = [item[0].lon, item[0].lat]
// 		let toCoord = [item[1].lon, item[1].lat]
// 		let toCoord1 = [item[2].lon, item[2].lat]
// 		// debugger;
// 		if (fromCoord && toCoord) {
// 			res.push({
// 				fromName: item[0].name,
// 				toName: item[1].name,
// 				toName1: item[2].name,
// 				coords: [fromCoord, toCoord,toCoord1]
// 			})
// 		}
// 	}
// 	return res
// }
var convertData2 = function (data) {
	let res = []
	for (let i = 0; i <  data.length; i ++) {
		let item = data[i]
    //  获取 来去 地址的 经纬度
    let arr=[]
    if(item.length>1&&item[1].name){
      item.forEach(item1=>{
        arr.push([item1.lon, item1.lat])
      })	
      res.push({
        name:'',
        color:item[1].color,
        coords: arr
      })
    }
	}
	return res
}
var myChart = null;

export default {
  data(){
    return{
      isMobile:false,
      widthDiv:200,
      heightDiv:200,
      xDiv:0,
      yDiv:0,
      center:{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},
      address:[
        {color:'#36A3F7',name:'乌鲁木齐国际陆港区',add:'新疆维吾尔自治区乌鲁木齐市头屯河区祥云中街651号附近',lat:43.87653,lon:87.412877},
        {color:'#E61C5D',name:'乌鲁木齐国际纺织品服装商贸中心',add:'北站四路西二巷',lat:43.88761,lon:87.480316},
        {color:'#34BFA3',name:'建投聚融广场和建投新兴产业',add:'乌鲁木齐市新市区卫星路(进出口加工区南侧约200米)',lat:43.86625,lon:87.527406},
        {color:'#F7B936',name:'智能终端电子产业园、高科技软件集群区',add:'乌鲁木齐市乌鲁木齐县万盛大街',lat:43.826407,lon:87.331753},  
        // {color:'#FFB822',name:'乌鲁木齐高铁枢纽综合开发区',add:'新疆维吾尔自治区乌鲁木齐市新市区乌鲁木齐经济技术开发区卫星路475号紫金大厦10楼1004室',lat:43.866575,lon:87.534437},
        {color:'#03D239',name:'白鸟湖临港产业园',add:'白鸟湖临港产业园',lat:43.86082,lon:87.367919},
      ],
      list:[
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#5867DD',name:''}],//'建投聚融广场',add:'乌鲁木齐市新市区卫星路(进出口加工区南侧约200米)',lat:43.85643,lon:87.531406}],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#901CE6',name:''}],//'百纳威智能终端电子产业园',add:'乌鲁木齐市乌鲁木齐县万盛大街',lat:43.826407,lon:87.331653},], 
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#E61C5D',name:''}],//'新疆国际陆港有限责任公司',add:'新疆维吾尔自治区乌鲁木齐市头屯河区祥云中街651号附近',lat:43.867953,lon:87.422877},],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#FFB822',name:''}],//'乌鲁木齐高铁枢纽综合开发区',add:'新疆维吾尔自治区乌鲁木齐市新市区乌鲁木齐经济技术开发区卫星路475号紫金大厦10楼1004室',lat:43.866575,lon:87.534437}],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#34BFA3',name:''}],//'白鸟湖临港产业园',add:'白鸟湖临港产业园',lat:43.86082,lon:87.407919}],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#00C5DC',name:''}],//'纺织服装商贸中心',add:'北站四路西二巷',lat:43.872761,lon:87.480316},],
        // [{lon:87.34097568237308,lat:44.005872344966236},{name:'qwe',lon:87.42674643432621,lat:43.93883117620762},{lon:87.44974643432621,lat:43.9123117620762},{lon:87.44974643432621,lat:43.9023117620762},{lon:87.48974643432621,lat:43.8823117620762}],
      ]
    }
  },
  created(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      this.isMobile = true//可以换成http地址
    }
    console.log(option.series[0])
    if(this.isMobile){
      option.series[0].label.normal.fontSize=13
      option.series[0].symbolSize=16
      option.series[1].lineStyle.normal.width=4
      option.series[2].lineStyle.normal.width=4
      option.series[1].lineStyle.normal.shadowBlur=0
      option.series[2].lineStyle.normal.shadowBlur=0
    }
  },
  components:{
    VueDraggableResizable,
  },
  mounted(){
    var box=this.$refs.mainMap
    var boxGesture=setGesture(box);  //得到一个对象
    // boxGesture.gesturestart=function(){  //双指开始
    // };
    boxGesture.gesturemove=function(e){  //双指移动
      // box.style.transform="scale("+e.scale+")";//改变目标元素的大小和角度

      if((box.offsetWidth>600 && e.scale>1) || (box.offsetWidth<400  && e.scale<1)){
        return
      }
      box.style.width = box.offsetWidth * (e.scale>1?1.1:0.9) + 'px'
      box.style.height = box.offsetHeight * (e.scale>1?1.1:0.9) + 'px'
      box.style.left = e.scale>1?box.style.left - 0.1*box.offsetWidth + 'px':box.style.left + 0.1*box.offsetWidth + 'px'
      box.style.top = e.scale>1?box.style.top - 0.2*box.offsetHeight + 'px':box.style.top + 0.2*box.offsetHeight + 'px'
      myChart.clear()
      myChart.resize()
      myChart.setOption(option,true)
    };
    // boxGesture.gestureend=function(){  //双指结束
    // };



    if(this.$refs.mainMap.offsetHeight){
      this.heightDiv=this.$refs.mainMap.offsetHeight
      this.widthDiv=this.$refs.mainMap.offsetWidth
    }
    window.addEventListener('resize', () => {
      this.heightDiv=parseInt(this.$refs.mainMap.offsetHeight)
      this.widthDiv=parseInt(this.$refs.mainMap.offsetWidth)
    })
    myChart = this.$echarts.init(document.getElementById('fxmap'))
    window.onresize = myChart.resize
    window.addEventListener("resize", myChart.resize)

    myChart.on("click", (param)=>{
      if (param.data.name == "维泰大厦") {
        this.$router.push({name:'detail',query:{type:'six',video:'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/videos/3/2021/02/Y5h7K5ke9oZHq33R956WA3zzM9ez5D.mp4'}})
      } else if (param.data.name == "乌鲁木齐国际陆港区") {
        this.$router.push({name:'detail',query:{type:'ruguan',video:'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/videos/3/2021/02/p2Iu85Ii2KgP8Gb5Bbkf5FIZs51zqW.mp4'}})
      } else if (param.data.name == "白鸟湖临港产业园") {
        this.$router.push({name:'detail',query:{type:'5'}})
      } else if (param.data.name == "乌鲁木齐国际纺织品服装商贸中心") {
        this.$router.push({name:'detail',query:{type:'2',video:'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/videos/3/2021/02/v1CdtcAcV7w1gT8o1kC7Rt1A77TWZT.mp4  '}})
      } else if (param.data.name == "建投聚融广场和建投新兴产业") {
        this.$router.push({name:'detail',query:{type:'3'}})
      }else if (param.data.name == "智能终端电子产业园、高科技软件集群区") {
        this.$router.push({name:'detail',query:{type:'4'}})
      }
    });


    let city_code = 'xinjiang'
    this.$echarts.registerMap(city_code, xjMap)
    option.geo.map = city_code;
    option.series[0].map = city_code;

    let arr=JSON.parse(JSON.stringify(this.address))
    arr.push({...this.center})
    option.series[0].data=convertData(arr)
    option.series[1].data=convertData2(this.list)
    option.series[2].data=convertData2(this.list)

    option.series[1].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#f93";
      }
    }

    option.series[2].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#F4DE90";
      }
    }

    option.series[0].itemStyle.normal.color = function (params) {
      if (params.name == '维泰大厦') {
        return "#ec2c26";
      }else{
        return params.data.color
      }
    }

    myChart.setOption(option)
  },
  beforeDestroy(){
    if(myChart){
      myChart.clear()
    }
  },
  methods:{
    toDetail(){
      this.$router.push({name:'detail2'})
    },
    changeL(item,index){
      if(this.list[index][1].name){
        this.list[index][1]={name:''}
      }else{
        this.list[index][1]=item
      }
      this.list.push(index)
      this.list.pop()
      // option.series[0].data=convertData1(this.list)
      option.series[1].data=convertData2(this.list)
      option.series[2].data=convertData2(this.list)
      option.geo.zoom = myChart.getOption().geo[0].zoom
      option.geo.center = myChart.getOption().geo[0].center
      
      myChart.setOption(option,true)
    },
     //监听滚轮时间
    gun(e){
      let wheelFlag = e.wheelDelta > 0 ? true : false
      let oldWidth = this.$refs.mainMap.offsetWidth
      let oldHeight = this.$refs.mainMap.offsetHeight
      // 分别计算出scaleX,scaleY的倍数
      let scaleX = e.offsetX / oldWidth
      let scaleY = e.offsetY / oldHeight
      if (wheelFlag) {
        this.toBig()
      } else {
        this.toSmall()
      }
      // 鼠标为中心的开始点,如果去掉这个将会以左上角开始滚动图片
      let newWidth = this.$refs.mainMap.offsetWidth
      let newHeight = this.$refs.mainMap.offsetHeight
      this.$refs.mainMap.style.left = this.$refs.mainMap.offsetLeft - scaleX * (newWidth - oldWidth) + 'px'
      this.$refs.mainMap.style.top = this.$refs.mainMap.offsetTop - scaleY * (newHeight - oldHeight) + 'px'
    },
    toBig(){
      if(this.$refs.mainMap.offsetWidth>1500){
        return
      }
      this.$refs.mainMap.style.width = this.$refs.mainMap.offsetWidth * 1.1 + 'px'
      this.$refs.mainMap.style.height = this.$refs.mainMap.offsetHeight * 1.1 + 'px'
      // myChart.resize()
      myChart.clear()
      myChart.resize()
      myChart.setOption(option,true)
    },
    toSmall(){
      if(this.$refs.mainMap.offsetWidth<500){
        return
      }
      this.$refs.mainMap.style.width = this.$refs.mainMap.offsetWidth / 1.1 + 'px'
      this.$refs.mainMap.style.height = this.$refs.mainMap.offsetHeight /1.1 + 'px'
      // myChart.resize()
      myChart.clear()
      myChart.resize()
      myChart.setOption(option,true)
    },
  }
}
</script>
<style lang="scss" scoped>
.city_map{
  width: 100%;
  height: 100%;
  background: #AFC6EB;
  position: relative;
  overflow: hidden;
  .dragging1{
    margin:0px auto;
  }
  .main1{
    width:800px;
    height: 1000px;
  }
  .main{
    width:800px;
    height: 1000px;
    margin-top: -100px;
    position: relative;
    background:url(~@a/img/map.png) no-repeat;
    background-size:100% 100%;
  }
  .main_m{
    margin-top: 250px;
  }
  .left_add{
    position: absolute;
    left: 20px;
    top: 220px;
    z-index: 1;
    font-size: 22px;
    font-weight: 600;
    color: #ccc;
    .margin{
      margin-top:50px
    }
    .item_add{
      display: flex;
      align-items: center;
      // &:hover .yuan{
      //   background:#fff;
      // }
      .yuan{
        cursor: pointer;
        height: 26px;
        width:26px;
        border-radius: 50%;
        background:#bbb;
        margin-right: 10px;
      }
      .yuan_m{
        height: 40px;
        width:40px;
      }
      .item_add_title{
        cursor: pointer;
        width:fit-content;
        width:-webkit-fit-content;
        width:-moz-fit-content;
        padding:2px 5px;
        margin: 10px 0;
        background:#5867DD;
        // &:hover{
        //   color:#1dd764;
        // }
      }
      .choose{
        color: #fff !important;
      }
      .choose_yuan{
        background:#5867DD !important;
      }
    }
  }
  .left_add_m{
    font-size: 32px;
  }
}
#fxmap{
  width: 100%;
  height: 100%;
}
.top{
  position: absolute;
  top: 0;
  height: 200px;
  width: 100%;
  background: url(~@a/img/banner.png) no-repeat;
  background-position:center;
  background-size: 1920px 200px;
  z-index: 100;
}
.top_m{
  height: 150px;
  background-size: 1200px 150px;
}
.footer{
  position: absolute;
  bottom: 0;
  height: 120px;
  width: 100%;
  background: url(~@a/img/footer.png) no-repeat;
  background-position:center;
  background-size: 1920px 120px;
  z-index: 100;
}
.footer_m{
 height: 100px;
 background-size: 1500px 100px;
}
</style>